﻿@model IEnumerable<Employee>


@{ Html.Telerik().Grid(Model)
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .DetailView(detailView => detailView.Template(e =>
    {            
            Html.Telerik().TabStrip()
                    .Name("TabStrip_" + e.EmployeeID)
                    .SelectedIndex(0)
                    .Items(items =>
                    {
                        items.Add().Text("Orders").Content(@<text>
                                
                                @(Html.Telerik().Grid(e.Orders)
                                        .Name("Orders_" + e.EmployeeID)
                                        .Columns(columns =>
                                        {
                                            columns.Bound(o => o.OrderID).Width(101);
                                            columns.Bound(o => o.ShipCountry).Width(140);
                                            columns.Bound(o => o.ShipAddress).Width(200);
                                            columns.Bound(o => o.ShipName).Width(200);
                                            columns.Bound(o => o.ShippedDate).Format("{0:d}");
                                        })
                                        .Pageable()
                                        .Sortable()
                                )
                                
                        </text>);
                        items.Add().Text("Contact Information").Content(@<text>
                                
                                <div class="employee-details">
                                    <img src="@Url.Content("~/Content/Grid/Employees/" + e.EmployeeID + ".jpg") " alt="@e.FirstName + " " + e.LastName " />
                                    <ul>
                                        <li>
                                            <label>Birth Date:</label>@e.BirthDate.Value.ToString("d") 
                                        </li>
                                        <li>
                                            <label>Country:</label>@e.Country 
                                        </li>
                                        <li>
                                            <label>City:</label>@e.City 
                                        </li>
                                        <li>
                                            <label>Address:</label>@e.Address 
                                        </li>
                                        <li>
                                            <label>Home Phone:</label>@e.HomePhone 
                                        </li>
                                    </ul>
                                </div>
                                
                        </text>);                                                       

                    })
                    .Render();
    }))
    .RowAction(row =>
    {
        if (row.Index == 0)
        {
            row.DetailRow.Expanded = true;
        }
    })
    .Pageable(paging => paging.PageSize(5))
    .Sortable()
    .Render();
}

@section HeadContent {

    <style type="text/css">
	    .employee-details ul
	    {
	        list-style:none;
            font-style:italic;
            margin-left:80px;
            margin-bottom: 20px;
	    }
	    .employee-details img
	    {
	        border: 1px solid #05679D;
	        float:left;
	    }
	    
	    .employee-details label
	    {
	        display:inline-block;
	        width:90px;
	        font-style:normal;
	        font-weight:bold;
	    }
    </style>

}
